<template>
  <div class="root">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form ref="form"
                 :model="form"
                 label-width="100px"
                 style="width:600px"
                  enctype="multipart/form-data">
          <el-form-item label="当前版本标识">
            <el-input v-model="form.versionName"
                      id="versiontag"></el-input>
          </el-form-item>

          <el-form-item label="选择文件">
              <el-upload class="upload-apk"
                          :http-request="pushFile"
                         :on-change="handlechange"
                         :on-remove="handleremove"
                         action="#"
                         ref="upload"
                         accept=".apk"
                         :limit="1"
                         :file-list="filelist"
                         :auto-upload="false"
              >
                <el-button slot="trigger"
                           size="small"
                           type="primary">选取文件</el-button>
                <div slot="tip"
                     class="el-uplad-tip">待写入的文件路径{{address}}</div>
                <div slot="tip"
                     class="el-uplad-tip">只能上传带版本标识的APK或完整APK</div>
              </el-upload>
            <span slot="footer"
                  class="dialog-footer"/>
          </el-form-item>
          <el-form-item>
            <!-- 推送 请求后端接口 推送文件到服务器上 -->
            <!-- 发布 让后端发送WS到安卓，安卓请求 文件并更新-->
            <el-button type="primary"
                       @click="clickpush()">推送</el-button>
            <el-button type="primary"
                       @click="publish()">发布</el-button>
            <!-- <el-button>取消</el-button> -->
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <div class="img-wrap">
<!--          <el-image-->
<!--            fit="scale-down"-->
<!--            style="width: 400px; height: 400px;"-->
<!--            :src="imgUrl"-->
<!--            :preview-src-list="srcList"-->
<!--          ></el-image>-->
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import FileSelect from '../update/FileSelect.vue';
import axios from 'axios';

export default {
  components: {FileSelect},
  data() {
    return {
      updatetype:{
        cold:'冷更新',
        hot:'热更新'
      },
      dataForm:{
        name: '',
        file: null
      },
      hasfile:false,
      logoList: [],
      address: '',
      filelist:[],
      form: {
        versionName:'',
        versionTag:'',
        name: '',
        file: null,
        color: '#ff0000'
      },
      imgUrl:
        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      srcList: [this.imgUrl]
    };
  },
  created: function() {
    this.getfile2Path();
  },
  methods: {
    clickpush(){
      this.$refs.upload.submit();  //让httprequest执行,而不是去主动执行这个func
    },
    handleremove(file,filelist){
      if(!filelist.length){
        this.hasfile = false;
      }
      this.form.file = null;
    },
    handlechange(file,filelist){
        if(filelist.length ==1){
          this.hasfile = true;
        }
        this.form.file = file;
    },
    pushFile(val) {
      // this.$refs.upload.submit()
      //首先拿到地址
      if (val.file == null) {
        this.$message.warning('请先选择要上传的文件');
        return false;
      }
      //取出refs.upload中的文件
      // uploadFile = this.$refs.upload.submit();
      let formDParams = new FormData();
      formDParams.append('file', val.file);//filename是键 file是值
      formDParams.append('versionTag', this.form.versionTag);
      formDParams.append("type","cold")
      let config ={
        headers:{
          'Content-Type' : 'multipart/form-data'
        },
        transformRequest:[function(data) {
          return data;
        }]
      };
      axios.post('/web/push',formDParams,config).then((res) => {
        console.log(res);
        if (res.data.code == "20000"){
          this.openM();
        }
      });

      // this.$http({
      //   url:'/web/push',
      //   headers: {'Content-Type': 'multipart/form-data;boundary=10'},//定义内容格式,很重要
      //   method: 'POST',
      //   formDParams
      // }).then(function(res) {
      //   debugger
      //   console.log(res);
      // });

    },
    openM() {
      this.$alert("提交成功");
    },
    publish(){
      //请求publish接口即可
      axios.get('/web/publishcold').then( (response) =>{
        debugger
        console.log(response.data);
        if(response.data.code == "20000"){
          this.openM()
        }
      });
    },
    getfile2Path(){
        this.$http.get('/web/getversion/main')
            .then(
                response => {
                  this.info = response.data;
                  console.log(this.info.data.filePath);
                  this.address = this.info.data.filePath;
                  // let strJ = JSON.parse(this.info)
                  // this.address = strJ.filePath
                  // // console.log('address',this.address)
                  // this.$message.info(this.address)
                  // console.log(this.address)
                }
            );
    }
  }
};
</script>

<style>
.choose-color{
  z-index: 9999;
  /* width: 210px; */
}
.line {
  text-align: center;
}
.img-wrap {
  width: 100%;
  height: 500px;
  margin-left: 68px;
}
.box{
  width: 220px !important;
}
</style>
